<template>
  <div class="right-content-main">
    <div class="header">
      <div class="title" v-if="showTitle">团队成员</div>
      <div v-else></div>
      <div class="current-box ">
        <span class="current-text">当前位置</span>
        <span class="line"></span>
        <span class="">
          <router-link to="/#/">首页</router-link>
        </span>
        <span class="line"></span>
        <span @click="backListByModalType()"  :class="{'base-text':!detailsInfo.teamName }">{{ detailsInfo.moduleName }}</span>
        <template v-if="detailsInfo.teamName">
          <span class="line"></span>
          <span class="base-text" @click="backListByModalType(detailsInfo.teamId)">{{ detailsInfo.teamName }}</span>
        </template>
      </div>
    </div>
    <div class="content">
      <div class="title">{{$TOOL.richTextWithUrlsRemove(detailsInfo.title) }}</div>
      <div class="sub-title" v-if="detailsType<=2">
        <span>创建时间：{{ detailsInfo.time}}    </span>
        <template  v-if="detailsType==1">
          <span>审定人：{{ detailsInfo.firstExpert}}    </span>
          <span>撰稿人：{{ detailsInfo.authorName}}    </span>
          <span>联络员：{{ detailsInfo.contact}}    </span>
        </template>
        <span >浏览次数：{{ detailsInfo.viewCount }}</span>
      </div>
      <div class="sub-title" v-if="detailsType==3">
        <span>作者：{{ detailsInfo.author}}    </span>
        <span v-if="detailsInfo.team" >团队：{{ detailsInfo.team }}</span>
      </div>
      <div class="sub-title" v-if="detailsType==4">
        <span>创建时间：{{ detailsInfo.time}}    </span>
      </div>
<!--      <div  v-if="detailsType==4" style="text-align: center">-->
<!--        <img :src="detailsInfo.expertLogo">-->
<!--      </div>-->
      <div class="detail_words" v-html="$TOOL.richTextWithUrls(detailsInfo.content) ">
      </div>

    </div>
    <a target="_blank" v-if="detailsInfo.url" :href="detailsInfo.url" class="df-sc gap-10 file-box">
      <span>
        <img width="22" src="/images/file.svg" />
      </span>
      {{detailsInfo.url}}
    </a>
  </div>
</template>

<script setup>

import {useRoute, useRouter} from "vue-router";
import {homeApi} from "@/api";
import tool from "@/utils/tool";

const route=useRoute()
const id=route.query.id
const detailsType=route.query.type
const showTitle=ref(false)
//detailsType 1新闻 2专家建议 3技术成果 4成员介绍
const router=useRouter()
const getDetailsUrl=()=>{
  switch (detailsType){
    case '1':
      return 'newDetails'
    case '2':
      detailsInfo.moduleName='专家建议'
      return 'expertAdviceInfo'
    case '3':
      detailsInfo.moduleName='技术成果'
      return 'getTechnologyViewInfo'
    case '4':
      detailsInfo.moduleName=route.query.title
      return 'getExpersInfo'
  }
}
const detailsInfo=reactive({
  title:'',
  content:'',
  moduleName:'',
  teamName:'',
  authorName:'',
  contact:'',
  firstExpert:'',
  author:'',
  team:'',
  expertLogo:'',
  url:'',
  time:'',
  viewCount:0,
  moduleType:'',
  teamId:''
})

const emits=defineEmits(['detailsChange'])
onMounted(loadPageData)
async function loadPageData(rowId=''){
  const url=getDetailsUrl()
  const res=await homeApi.commonDetails.get(url, {id:rowId||id})
  if(detailsType==='3'){
    detailsInfo.author=res.author
    detailsInfo.team=res.team
    detailsInfo.url=res.url
    detailsInfo.content=tool.richTextWithUrls(res.content)
    detailsInfo.title=res.tecname
  }else if(detailsType==='4'){
    detailsInfo.title=res.name
    detailsInfo.expertLogo=tool.filterUrl(res.expertLogo)
    detailsInfo.time=tool.dateFormat(res.createDate,'YYYY-MM-DD')
    detailsInfo.content=tool.richTextWithUrls(res.informationContent)
  }else{
    detailsInfo.content=tool.richTextWithUrls(res.informationContent)
    detailsInfo.title=res.title
    detailsInfo.time=tool.dateFormat(res.createDate,'YYYY-MM-DD')
    detailsInfo.viewCount=res.viewCount||res.numberClicks
    if(res.moduleName){
      detailsInfo.moduleName=res.moduleName
    }
    detailsInfo.teamName=res.teamName
    detailsInfo.moduleType=res.moduleType
    detailsInfo.teamId=res.teamId
    if(detailsType==='1'){
      detailsInfo.contact=res.contact
      detailsInfo.firstExpert=res.firstExpert
      detailsInfo.authorName=res.authorName
    }
  }
  // if(detailsInfo.)
  emits('detailsChange',detailsInfo)
}

function backListByModalType(teamId=''){
  if(route.query.type==2){
    router.push('/expertsList')
    return
  }
  if(route.query.type==3){
    router.push('/skillList')
    return
  }
  if(route.query.type==4){
    router.go(-1)
    return
  }
  router.push({
    path:'/list',
    query :{
      moduleType:detailsInfo.moduleType,
      teamId:teamId||'1'
    }
  })
}
defineExpose({loadPageData})


</script>

<style scoped lang="scss">
.right-content-main
{
  flex: 1;
  min-height: 820px;
  height: 100%;
  background: #FFFFFF;
  position: relative;
  .file-box{
    position: absolute;
    right: 30px;
    font-size: 18px;
    bottom: 30px;
    color: $base-color;
    text-decoration: underline;
  }
  .header{
    height: 80px;
    margin: 0 24px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    .current-box{
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 16px;
      span{
        cursor: pointer;
        &:hover{
          font-weight: bold;
          color: $base-color;
          text-decoration: underline;
        }
      }
      .line{
        width: 20px;
        border-bottom: 1px solid #333;
        margin: 0 5px;
      }
      .current-text{
        color: #999;
      }
      .base-text{
        color: $base-color;
      }
    }

    .title{
      position: relative;
      height: 100%;
      padding-top: 16px;
      font-size: 26px;
      font-weight: bold;
      color: $base-color;
      &::after{
        content: '';
        width: 100%;
        border-bottom: 2px solid $base-color;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
  .detail_words{
    margin: 16px auto 0;
  }
  :deep(.detail_words){

    img {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
      width: 650px;
    }
    p{
      font-size: 16px;
      color: #000;
      line-height: 32px;
      text-indent: 2em;
    }
  }
  .content{
    padding: 30px;
    position: relative;
    width: 1000px;
    margin:  0 auto;
    font-size: 16px;
    .title{
      font-size: 26px;
      text-align: center;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }
    .sub-title{
      height: 30px;
      border-bottom: 1px solid #ccc;
      text-align: center;
      line-height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      font-size: 12px;
    }
  }
}
</style>
